"use client";
/*
 * @Author: hongbin
 * @Date: 2025-05-01 11:52:14
 * @LastEditors: hongbin
 * @LastEditTime: 2025-05-01 16:46:50
 * @Description:
 */
import { FC, useEffect, useRef, useState } from "react";
import { styled } from "styled-components";
import * as ECharts from "echarts";

interface IProps {
    data1: number[];
    data2: number[];
    color1?: string;
    color2?: string;
}

/** 折线图 */
const LineChart: FC<IProps> = ({
    data1 = [9, 8, 9, 1, 1, 6, 6],
    data2 = [13, 5, 8, 9, 6, 4, 4],
    color1 = "#00FDFB",
    color2 = "#00fda9",
}) => {
    const divRef = useRef<HTMLDivElement>(null);
    const ChartRef = useRef<ECharts.ECharts>(null);

    useEffect(() => {
        if (divRef.current) {
            const chart = ECharts.init(divRef.current);

            ChartRef.current = chart;
            const categories = ["01", "02", "03", "04", "05", "06", "07"];
            const redData = data1 || [9, 8, 9, 1, 1, 6, 6];
            const yellowData = data2 || [13, 5, 8, 9, 6, 4, 4];

            const option = {
                backgroundColor: "transparent",
                xAxis: {
                    type: "category",
                    data: categories,
                    boundaryGap: false,
                    axisLine: { lineStyle: { color: "#88888800" } },
                    axisLabel: { color: "#aaa" },
                },
                yAxis: {
                    type: "value",
                    min: 0,
                    // max: 15,
                    // interval: 3,
                    axisLine: { lineStyle: { color: "#88888844" } },
                    splitLine: { lineStyle: { color: "#cccccc33" } },
                    axisLabel: { color: "#aaa" },
                    name: "unit",
                    nameTextStyle: {
                        color: "#999",
                        padding: [0, 10, 0, 0],
                    },
                },
                grid: {
                    left: 30,
                    right: 20,
                    top: 30,
                    bottom: 30,
                },
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    data: ["红线", "黄线"],
                    textStyle: { color: "#fff" },
                    show: false,
                },
                series: [
                    {
                        name: "红线",
                        type: "line",
                        data: redData,
                        lineStyle: {
                            color: color1,
                            width: 2,
                        },
                        symbol: "path://M960 64v896H64V64h896z m-64 64H128v768h768V128zM512 192a320 320 0 1 1 0 640A320 320 0 0 1 512 192z",
                        symbolSize: [10, 10],
                        itemStyle: {
                            color: color1,
                        },
                    },
                    {
                        name: "黄线",
                        type: "line",
                        data: yellowData,
                        itemStyle: {
                            color: color2,
                        },
                        symbol: "path://M960 64v896H64V64h896z m-64 64H128v768h768V128zM512 192a320 320 0 1 1 0 640A320 320 0 0 1 512 192z",
                        symbolSize: [10, 10],
                        lineStyle: {
                            color: color2,
                            width: 2,
                        },
                    },
                ],
            };

            chart.setOption(option);

            return () => {
                chart.dispose();
            };
        }
    }, []);

    useEffect(() => {
        if (ChartRef.current) {
            ChartRef.current.setOption({
                series: [
                    {
                        data: data1,
                    },
                    {
                        data: data2,
                    },
                ],
            });
        }
    }, [data1, data2]);

    return <ChartWarp ref={divRef}></ChartWarp>;
};

export default LineChart;

const ChartWarp = styled.div`
    width: 300px;
    height: 200px;
`;
